<template>
	<view class="page">
		<nav-bar ref="navBar" backState="2000" type="transparentFixed" :titleCenter="false" bgColor="themeBgColor"
		 transparentFixedFontColor="#FFF" fontColor="#FFF" :shadow="false">
			<view class="search_message_box">
				<view class="search_box" @click="onPageJump('/pages/home/search')">
					<view class="search">请输入关键字</view>
					<view class="btn">搜索</view>
				</view>
				<!-- <view class="icon_message" @click="onPageTokenJump('/pages/message/message')"></view> -->
			</view>
			<view class="search_message_box" slot="transparentFixed">
				<view class="search_box" @click="onPageJump('/pages/home/search')">
					<view class="search">请输入关键字</view>
					<view class="btn">搜索</view>
				</view>
				<!-- <view class="icon_message" @click="onPageTokenJump('/pages/message/message')"></view> -->
			</view>
		</nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<!-- <view class="label_box">
                <text v-for="(item,index) of recommendLabelList" :key="item.objId" @click="onPageJump('/pages/home/recommendGoodsList?objId='+item.objId+'&name='+item.title)">{{item.title}}</text>
            </view> -->
			<view class="bg_image_box" :style="{ paddingTop: statusBarHeight + 'px' }">
				<!-- banner -->
				<view class="banner_swiper_box">
					<swiper class="banner_swiper" :autoplay="true" :interval="3000" circular :duration="1000" @change="onSwiperChange">
						<swiper-item v-for="(item, index) of bannerList" :key="index">
							<view class="banner_img" :class="{ active: swiperIndex == index }">
								<image :src="item.imgUrl" mode="aspectFill" @click="onBanner(item)"></image>
							</view>
						</swiper-item>
					</swiper>
					<view class="swiper_pages">
						{{ swiperIndex + 1 }}
						<text>/</text>
						{{ bannerList.length }}
					</view>
				</view>
				<!-- 导航栏 -->
				<swiper class="menu_swiper" :indicator-dots="false" :duration="1000">
					<swiper-item>
						<view class="nav_box">
							<view class="navs" @click="onPageJump('/pages/shopDirect/shopDirect')">
								<image src="../../static/icon/shengBa/ic_home_a.png" mode="aspectFill"></image>
								<text>商家直营</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/mall/enteringSheng')">
								<image src="../../static/icon/shengBa/ic_home_b.png" mode="aspectFill"></image>
								<text>商家入驻</text>
							</view>
							<view class="navs" @click="onTokenJump('/pages/integral/integralMall')">
								<image src="../../static/icon/shengBa/ic_home_c.png" mode="aspectFill"></image>
								<text>积分商城</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/baiyeAlliance/alliance')">
								<image src="../../static/icon/shengBa/ic_home_d.png" mode="aspectFill"></image>
								<text>百业联盟</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/businessSchool/businessSchool')">
								<image src="../../static/icon/shengBa/ic_home_e.png" mode="aspectFill"></image>
								<text>省吧新闻</text>
							</view>
							<view class="navs" @click="applyPopup = true">
								<image src="../../static/icon/shengBa/ic_home_f.png" mode="aspectFill"></image>
								<text>申请会员</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/carMaintenance/carMaintenance')">
								<image src="../../static/icon/shengBa/ic_home_g.png" mode="aspectFill"></image>
								<text>爱车保养</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/storeService/storeService')">
								<image src="../../static/icon/shengBa/ic_home_h.png" mode="aspectFill"></image>
								<text>门店服务</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/services/insurance')">
								<image src="../../static/icon/shengBa/ic_home_i.png" mode="aspectFill"></image>
								<text>保险咨询</text>
							</view>
							<view class="navs" @click="onPageJump('/pages/services/services')">
								<image src="../../static/icon/shengBa/ic_home_j.png" mode="aspectFill"></image>
								<text>更多服务</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 资讯 -->
			<view class="news_box">
				<image @click="onPageJump('/pages/news/newsList')" src="../../static/icon/theme/ic_news.png" mode="aspectFit"></image>
				<view class="line"></view>
				<swiper class="news_swiper" vertical circular :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) of newsList" :key="item.objId" @click="onNews(item)">
						<view class="news_title">{{ item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 推荐商品 -->
			<view class="cube_box">
				<view class="left" v-if="recommendList.length>0" @click="onJumpRecommend(recommendList[0].objId,recommendList[0].title)">
					<view class="classify">
						<view>{{recommendList[0].title}}</view>
						<text>{{recommendList[0].subTitle}}</text>
					</view>
					<image :src="recommendList[0].adImg[0]" mode="aspectFill"></image>
				</view>
				<view class="right" v-if="recommendList.length >= 3">
					<view class="up" @click="onJumpRecommend(recommendList[1].objId,recommendList[1].title)">
						<view class="classify active">
							<view>{{recommendList[1].title}}</view>
							<text>{{recommendList[1].subTitle}}</text>
						</view>
						<image :src="recommendList[1].adImg[0]" mode="aspectFill"></image>
					</view>
					<view class="down" @click="onJumpRecommend(recommendList[2].objId,recommendList[2].title)">
						<view class="classify ">
							<view>{{recommendList[2].title}}</view>
							<text>{{recommendList[2].subTitle}}</text>
						</view>
						<image :src="recommendList[2].adImg[0]" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<!-- 砍价模块 -->
			<view class="bargain_box" v-if="module.bargain">
				<view class="bargain_title">
					<image src="../../static/icon/theme/bargin.png" mode="aspectFill"></image>
					<text>全民来砍价</text>
				</view>
				<bargain-goods-item v-for="(item,index) of bargainList" :key="index" :item="item" :index="index"></bargain-goods-item>
				<view class="bargain_bottom_box">
					<view class="bg">
						<button @click="onPageJump('/pages/bargain/bargainList')">查看更多 ></button>
					</view>
					<view class="qcclude"></view>
				</view>
				<!-- <view class="more_goods"><button @click="onPageJump('/pages/bargain/bargainList')">查看更多 ></button></view> -->
			</view>

			<!-- 活动导航 -->
			<view class="activity_nav_box">
				<view :class="{ active: activityType == 1000 }" @click="activityType = 1000">
					<view>超值秒杀</view>
					<text>全场低至3折</text>
				</view>
				<text class="line">|</text>
				<view :class="{ active: activityType == 2000 }" @click="activityType = 2000">
					<view>精品拼团</view>
					<text>一起购更划算</text>
				</view>
				<text v-if="module.integralMall" class="line">|</text>
				<view v-if="module.integralMall" :class="{ active: activityType == 3000 }" @click="activityType = 3000">
					<view>积分兑换</view>
					<text>免费换福利</text>
				</view>
			</view>
			<!-- 秒杀 -->
			<view class="goods_box" v-if="activityType == 1000">
				<spike-goods-item v-for="(item, index) of spikeList" :key="item.objId" :item="item" :index="index"></spike-goods-item>
				<view class="more_goods"><button @click="onPageJump('/pages/home/spikeList')">查看更多 ></button></view>
			</view>
			<!-- 拼团 -->
			<view class="goods_box" v-if="activityType == 2000">
				<fight-goods-item v-for="(item, index) of fightList" :key="item.objId" :item="item" :index="index"></fight-goods-item>
				<view class="more_goods"><button @click="onPageJump('/pages/home/fightList')">查看更多 ></button></view>
			</view>
			<!-- 积分-->
			<view v-if="module.integralMall && activityType == 3000">
				<home-integral-goods-item v-for="(item, index) of integralList" :key="item.objId" :item="item" :index="index"></home-integral-goods-item>
				<view class="more_goods"><button @click="onPageJump('/pages/integral/integralMall')">查看更多 ></button></view>
			</view>
			<!-- 优惠券 -->
			<!-- <view class="coupon_swiper_box">
				<swiper :autoplay="true" :interval="3000" :duration="600" @change="onCouponSwiperChange">
					<swiper-item class="activity_entrance" v-for="(item,index) of voucherList" :key="index">
						<image :src="item.img" mode="aspectFill" @click="onCollarCoupon(item)"></image>
					</swiper-item>
				</swiper>
				<view class="point">
					<text v-for="(item, index) of voucherList" :class="{active : couponSwiperIndex == index}" :key="index"></text>
				</view>
			</view> -->
			<!-- 活动 -->
			<!-- <view class="activity_box">
				<view>
					<view class="activity_item" v-for="(item, index) of recommendList" :key="index">
						<view class="activity_title">{{ item.title }}</view>
						<view class="activity_prompt" :class="['color' + (index + 1)]">{{ item.subTitle }}</view>
						<view class="activity_goods_box">
							<view class="activity_goods_box" @click="onPageJump('/pages/home/shop/recommendList?objId=' + item.objId + '&title=' + item.title)">
								<image v-for="(childItem, childIndex) of item.adImg" :key="childIndex" :src="childItem" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 商品类型筛选 -->
			<view class="goods_type_box">
				<goods-type-select @change="goodsTypeChange"></goods-type-select>
			</view>
			<!-- 商品排序 -->
			<view class="goods_sort_box">
				<view :class="{ active: sortType == 3000 }" @click="onSortType(3000)">智能排序</view>
				<view :class="{ active: sortType == 3002 }" @click="onSortType(3002)">好评优先</view>
				<view :class="{ active: sortType == 3001 }" @click="onSortType(3001)">低价优先</view>
				<view :class="{ active: sortType == 3003 }" @click="onSortType(3003)">销量优先</view>
			</view>
			<waterfall-goods ref="waterfall" :list="goodsDataList"></waterfall-goods>
		</mescroll-body>
		<view class="video_box" v-if="videoShow" @click="onCloseVideo"><video :src="videoUrl" autoplay="true" controls></video></view>
		<!-- 优惠券弹框 -->
		<view class="bullet_mask" v-if="bulletShow" @click="bulletShow = false">
			<image :src="bulletInfo.img" @click.stop="onCollarCouponByPopup" mode="widthFix"></image>
		</view>
		<attention-public v-model="showPopup" :showBtn="true"></attention-public>
		<!-- 联系客服 -->
		<view class="contact_us" @click="onPhone">
			<image src="../../static/icon/alliance/ic_phone.png" mode="aspectFill"></image>
		</view>
		<!-- 申请会员 -->
		<vip-popup v-model="applyPopup"></vip-popup>
	</view>
</template>

<script>
	import vipPopup from '@/components/module/vip-popup.vue'
	import spikeGoodsItem from '@/components/module/spike_goods_item';
	import fightGoodsItem from '@/components/module/fight_goods_item';
	import bargainGoodsItem from '@/pages/bargain/components/bargain_goods_item';
	import homeIntegralGoodsItem from '@/components/module/home_integral_goods_item';
	import waterfallGoods from '@/components/module/waterfall_goods';
	import goodsTypeSelect from '@/components/module/goods_type_select';
	import attentionPublic from '@/components/module/attention_public';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef MP-WEIXIN
	import {
		onLogin
	} from '@/config/login';
	// #endif
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			spikeGoodsItem,
			fightGoodsItem,
			homeIntegralGoodsItem,
			bargainGoodsItem,
			waterfallGoods,
			goodsTypeSelect,
			attentionPublic,
			vipPopup
		},
		data() {
			return {
				statusBarHeight: 0,
				videoUrl: '',
				videoShow: false,
				swiperIndex: 0,
				couponSwiperIndex: 0,
				bannerList: [],
				sortType: 3000,
				menuList: [],
				newsList: [],
				activityType: 1000,
				goodsDataList: [],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false, //是否在初始化后,自动执行downCallback; 默认true,
					toTop: {
						src: ""
					}
				},
				voucherList: [],
				bulletShow: false,
				bulletInfo: {},
				showPopup: false,
				recommendList: [],
				spikeList: [],
				fightList: [],
				integralList: [],
				bargainList: [],
				loadimg: false,
				module: {},
				applyPopup: false
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			this.module = this.$base.module;
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifdef MP-WEIXIN
			onLogin('try', () => {
				this.getCoupon();
			});
			// #endif
			this.pageData();
			// #ifdef H5
			let recommendCode = uni.getStorageSync('recommendCode');
			if (recommendCode) {
				this.showPopup = true;
			}
			// #endif
		},
		//页面显示
		onShow() {
			if (this.userInfo.token) {
				this.getCoupon();
			}
		},
		//方法
		methods: {
			...mapMutations(['setWebViewUrl']),
			pageData() {
				// 轮播图接口
				this.$http
					.post('api/open/v1/lunbo', {
						locatType: 1101
					})
					.then(res => {
						this.bannerList = res;
					});
				this.$http
					.post('api/article/v1/list', {
						pageNo: 1,
						pageSize: 10,
						recommend: true
					})
					.then(res => {
						this.newsList = res.data;
					});
				this.$http.get('api/shopAd_category/v1/mall_list_data').then(res => {
					this.recommendList = res;
				});
				// 菜单列表
				this.$http
					.get('api/mall/goods/v1/type', {
						type: 1401
					})
					.then(res => {
						if (res.length > 10) {
							this.menuList = res.splice(0, 10);
						} else {
							this.menuList = res;
						}
					});
				// 优惠卷
				this.$http.get('api/open/v1/discount_voucher_list').then(res => {
					this.voucherList = res;
				});
				// 秒杀
				this.$http
					.post('api/mall/goods/v1/spike_list', {
						pageNo: 1,
						pageSize: 2
					})
					.then(res => {
						this.spikeList = res.data;
					});
				// 拼团
				this.$http
					.post('api/mall/goods/v1/pt_list', {
						pageNo: 1,
						pageSize: 2
					})
					.then(res => {
						this.fightList = res.data;
					});
				// 积分
				this.$http
					.post('api/shop_integral/v1/list', {
						pageNo: 1,
						pageSize: 2
					})
					.then(res => {
						this.integralList = res.data;
					});
				// 砍价
				this.$http
					.post('api/mall/goods/v1/cut_list', {
						pageNo: 1,
						pageSize: 2
					})
					.then(res => {
						this.bargainList = res.data;
					});
			},
			//领取优惠券
			onCollarCoupon(item) {
				this.judgeLogin(() => {
					this.$http
						.get('api/open/v1/receive_discount_voucher', {
							objId: item.objId
						})
						.then(res => {
							uni.showToast({
								title: '领取成功,请到我的里面查看',
								icon: 'none'
							});
						});
				});
			},

			//获取优惠券弹窗信息
			getCoupon() {
				this.$http.get('api/open/v1/bullet_box').then(res => {
					if (res && res.voucherId) {
						this.bulletShow = true;
						this.bulletInfo = res;
					}
				});
			},

			//领取弹框优惠券
			onCollarCouponByPopup() {
				this.$http
					.get('api/open/v1/receive_discount_voucher', {
						objId: this.bulletInfo.voucherId
					})
					.then(res => {
						this.bulletShow = false;
						uni.showToast({
							title: '领取成功,请到我的里面查看',
							icon: 'none'
						});
					});
			},
			onPhone() {
				uni.makePhoneCall({
					phoneNumber: '19926599580' //仅为示例
				});
			},
			// 轮播图变化
			onCouponSwiperChange(e) {
				this.couponSwiperIndex = e.detail.current;
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			onPageTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			// 轮播图点击
			onBanner(item) {
				if (item.jumpType == 1501) {
					uni.navigateTo({
						url: '/pages/home/shop/shop?objId=' + item.jumpRecord.id
					});
				} else if (item.jumpType == 1502) {
					uni.navigateTo({
						url: '/pages/home/shop/goodsDetail?objId=' + item.jumpRecord.id
					});
				} else if (item.jumpType == 1601) {
					uni.navigateTo({
						url: '/pagesMy/my/about'
					});
				} else if (item.jumpType == 1201) {
					this.setWebViewUrl(item.jumpRecord.webViewUrl);
					uni.navigateTo({
						url: '/pages/home/webView'
					});
				} else if (item.jumpType == 1301) {
					this.videoUrl = item.jumpRecord.videoUrl;
					this.videoShow = true;
				}
			},
			// 排序选择
			onSortType(val) {
				this.sortType = val;
				this.mescroll.triggerDownScroll();
			},
			// 分类点击
			goodsTypeChange(val) {
				this.typeId = val.objId;
				this.mescroll.triggerDownScroll();
			},
			onJumpRecommend(objId, title) {
				console.log("111");
				uni.navigateTo({
					url: '/pages/home/shop/recommendList?objId=' + objId + '&title=' + title
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.loadData(1);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},
			loadData(pageNo) {
				let httpData = {
					pageNo: pageNo,
					pageSize: 15,
					sortType: this.sortType
				};
				if (this.typeId) {
					httpData.typeId = this.typeId;
				}
				this.$http
					.post('api/mall/goods/v1/list', httpData, {
						load: false
					}).then(res => {
						uni.stopPullDownRefresh();
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)

						if (pageNo == 1) {
							this.goodsDataList = res.data;
						} else {
							this.goodsDataList = this.goodsDataList.concat(res.data);
						}
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
			},
			// 轮播图变化
			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
			},
			// 资讯选择
			onNews(item) {
				uni.navigateTo({
					url: '/pages/news/newsDetails?objId=' + item.objId
				});
			},
			onHope() {
				uni.showToast({
					icon: 'none',
					title: "敬请期待~"
				})
			}
		},

		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		onPageScroll(e) {
			this.$refs.navBar.pageScroll(e);
		},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.page {
		background-color: #fff;
		min-height: 100vh;
	}

	.bullet_mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 80%;
		}
	}

	.search_message_box {
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.search_box {
			font-weight: normal;
			flex: 1;
			height: 64rpx;
			background-color: #fff;
			border-radius: 32rpx;
			font-size: 28rpx;
			color: #c9c9c9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 4rpx 0 40rpx;
			/* #ifdef MP */
			margin-right: 15rpx;

			/* #endif */
			.search {
				display: flex;
				align-items: center;

				&:before {
					content: '';
					@include bis('../../static/icon/ic_search_black.png');
					width: 30rpx;
					height: 29rpx;
					margin-right: 20rpx;
				}
			}

			.btn {
				width: 120rpx;
				height: 56rpx;
				background-color: $themeColor;
				border-radius: 32rpx;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
				color: #ffffff;
			}
		}

		.icon_message {
			@include bis('../../static/icon/ic_message.png');
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}

	.label_box {
		@include theme('gradient_bg');
		padding: 10rpx 30rpx 25rpx 30rpx;
		display: flex;
		flex-wrap: wrap;

		text {
			background-color: rgba(255, 255, 255, 0.4);
			height: 48rpx;
			border-radius: 8rpx;
			margin: 4rpx;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 48rpx;
			padding: 0 16rpx;
		}
	}

	.video_box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		display: flex;
		align-items: center;
		justify-content: center;

		video {
			width: 100%;
		}
	}

	.bg_image_box {
		background-color: $themeColor;
		//@include theme("home_bg_image");
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.banner_swiper_box {
		position: relative;
		padding-top: 70rpx;
		transform: translateY(30rpx);

		.banner_swiper {
			height: 270rpx;
			position: relative;
			z-index: 2;

			swiper-item {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0 32rpx;

				.banner_img {
					width: 100%;
					height: 100%;
					transform: scale(0.88);
					transition: all 0.4s;

					image {
						width: 100%;
						height: 100%;
						box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
						border-radius: 20rpx;
					}

					&.active {
						transform: scale(1);
					}
				}
			}
		}

		.swiper_pages {
			position: absolute;
			bottom: 20rpx;
			right: 60rpx;
			height: 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			line-height: 40rpx;
			border-radius: 20rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 0 20rpx;
			z-index: 2;

			text {
				margin: 0 6rpx;
			}
		}
	}

	.goods_type_box {
		//margin-top: 20rpx;
	}

	.menu_swiper {
		padding: 30rpx 10rpx 20rpx 10rpx;
		background-color: #fff;
		height: 380rpx;
		//margin: 24rpx 20rpx 0 20rpx;
		//border-radius: 20rpx 20rpx 0 0;

		.nav_box {
			display: flex;
			flex-wrap: wrap;

			.navs {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx 0;

				image {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				text {
					font-size: 24rpx;
					color: #3d3d3d;
					margin-top: 20rpx;
					@include toe();
					width: 100%;
					text-align: center;
				}
			}
		}
	}

	.coupon_swiper_box {
		margin-top: 20rpx;
		position: relative;
		padding-bottom: 20px;

		swiper {
			height: 190rpx;
		}

		.activity_entrance {
			image {
				width: 100%;
				height: 190rpx;
			}
		}

		.point {
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;

			text {
				width: 20rpx;
				height: 6rpx;
				background-color: #e5e5e5;
				border-radius: 3rpx;
				margin: 0 5rpx;

				&.active {
					background-color: $themeColor;
				}
			}
		}
	}

	.news_box {
		background-color: #ecffdb;
		margin: 10rpx 32rpx 24rpx 32rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		border-radius: 8px;

		image {
			width: 112rpx;
			height: 24rpx;
			flex-shrink: 0;
		}

		.line {
			width: 2rpx;
			height: 24rpx;
			background-color: #7ac23c;
			margin: 0 20rpx;
		}

		.news_swiper {
			height: 34rpx;
			width: calc(100% - 94rpx);

			.news_title {
				font-size: 24rpx;
				color: #333333;
				width: 100%;
				@include toe();
			}
		}
	}

	.cube_box {
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;

		.left {
			position: relative;

			image {
				width: 337rpx;
				height: 292rpx;
			}

			.classify {
				z-index: 3;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				color: #fff;
				display: flex;
				flex-direction: column;

				view {
					font-size: 28rpx;
					font-weight: bold;
				}

				text {
					font-size: 18rpx;
				}
			}
		}

		.right {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			image {
				width: 337rpx;
				height: 140rpx;
			}

			.classify {
				z-index: 3;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				color: #fff;
				display: flex;
				flex-direction: column;

				view {
					font-size: 28rpx;
					font-weight: bold;
				}

				text {
					font-size: 18rpx;
				}

				&.active {
					color: #333333;
				}
			}

			.up {
				position: relative;
			}

			.down {
				position: relative;
			}
		}
	}

	.bargain_box {
		// background-image: linear-gradient(0deg, $viceColor 0%, #f7f7f7 100%);
		display: flex;
		flex-direction: column;
		align-items: center;

		.bargain_title {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60rpx 0 30rpx 0;

			image {
				width: 288rpx;
				height: 35rpx;
			}

			text {
				font-size: 24rpx;
				color: #ffffff;
				margin-top: 12rpx;
				width: 164rpx;
				height: 42rpx;
				background-color: #ffba31;
				border-radius: 4rpx;
				line-height: 42rpx;
				text-align: center;
			}
		}



		.bargain_bottom_box {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: center;

			.bg {
				height: 86rpx;
				background-color: #eca10d;
				width: 680rpx;
				display: flex;
				justify-content: center;
				padding-top: 12rpx;

				button {
					width: 184rpx;
					height: 50rpx;
					background-color: #eca10d;
					border-radius: 28rpx;
					font-size: 28rpx;
					color: #FFF;
					line-height: 50rpx;
					position: absolute;
					z-index: 3;
				}
			}

			.qcclude {
				width: 100%;
				height: 70rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				@include bis("../../static/icon/theme/bg_home_bargaining_yellow.png");
			}
		}

		.more_goods {
			padding-top: 30rpx;
		}
	}

	.activity_box {
		padding: 40rpx 20rpx;

		>view {
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 20rpx;
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 97rpx;
				bottom: 20rpx;
				width: 1rpx;
				background-color: #f3f3f3;
			}

			.activity_item {
				padding: 20rpx 30rpx 0 30rpx;
				width: 50%;

				.activity_title {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}

				.activity_prompt {
					font-size: 24rpx;
					margin-top: 10rpx;

					&.color1 {
						color: #74c355;
					}

					&.color2 {
						color: #ffb33a;
					}

					&.color3 {
						color: #ff3333;
					}

					&.color4 {
						color: #da45e3;
					}

					&.color5 {
						color: #3594ff;
					}

					&.color6 {
						color: #613fdf;
					}
				}

				.goods_box {

					width: 100%;
					display: flex;
					margin-top: 12rpx;

					>image {
						flex: 1;
						height: 176rpx;
						border-radius: 8rpx;

						&:nth-child(2) {
							margin-left: 10rpx;
						}
					}

					.goods_list {
						width: 97rpx;
						margin-left: 5rpx;

						&:first-child {
							margin-left: 0;
						}

						>image {
							width: 97rpx;
							height: 116rpx;
							border-radius: 8rpx;
						}

						.store_price {
							font-size: 18rpx;
							color: #999999;
							text-decoration: line-through;
						}

						.price {
							font-size: 24rpx;
							color: #ff4444;
						}
					}
				}
			}
		}
	}

	.goods_sort_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 28rpx;
		background-color: #fff;

		>view {
			padding: 30rpx 0rpx;
			white-space: nowrap;
			color: #333333;
			opacity: 0.5;
			position: relative;
			flex: 1;
			text-align: center;

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				width: 2rpx;
				right: 0;
				height: 24rpx;
				transform: translateY(-50%);
				background: #cccccc;
			}

			&:last-child::before {
				content: inherit;
				width: 0;
			}
		}

		.active {
			opacity: 1;
			color: $themeColor;
		}
	}

	.activity_nav_box {
		background-color: #f5f5f5;
		padding: 40rpx 0rpx 30rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.line {
			color: #ccc;
		}

		>view {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			view {
				font-size: 32rpx;
				color: #333333;
			}

			text {
				font-size: 24rpx;
				color: #999999;
				height: 42rpx;
				border-radius: 4rpx;
				line-height: 42rpx;
				margin-top: 10rpx;
				padding: 0 10rpx;
			}

			&.active {
				view {
					color: $themeColor;
				}

				text {
					color: #ffffff;
					@include theme('gradient_bg');
				}
			}
		}
	}

	.goods_box {
		background-color: #F5F5F5;
	}

	.activity_goods_box {
		background-color: #fff;
		padding-top: 20rpx;
		width: 100%;
		display: flex;
		margin-top: 12rpx;

		>image {
			flex: 1;
			height: 176rpx;
			border-radius: 8rpx;

			&:nth-child(2) {
				margin-left: 10rpx;
			}
		}

		.goods_list {
			width: 97rpx;
			margin-left: 5rpx;

			&:first-child {
				margin-left: 0;
			}

			>image {
				width: 97rpx;
				height: 116rpx;
				border-radius: 8rpx;
			}

			.store_price {
				font-size: 18rpx;
				color: #999999;
				text-decoration: line-through;
			}

			.price {
				font-size: 24rpx;
				color: #ff4444;
			}
		}
	}

	.more_goods {
		padding: 10rpx 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: center;

		button {
			width: 260rpx;
			height: 60rpx;
			@include theme('gradient_bg');
			font-size: 28rpx;
			color: #ffffff;
			line-height: 60rpx;
		}
	}

	.contact_us {
		position: fixed;
		bottom: 250rpx;
		right: 30rpx;
		background-color: $themeColor;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #FFF;
		z-index: 3;

		image {
			width: 40rpx;
			height: 40rpx;
			z-index: 5;
		}
	}
</style>
